@charset "UTF-8";

/*css reset*/
* {margin:0;padding:0; border:0; word-break:break-all; font-family:"微软雅黑",'Microsoft YaHei','华文黑体','STHeiti','宋体',helvetica, arial, verdana, sans-serif; font-size: 12px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0 none;}
address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul,li {list-style-type:none;}
li{display:block;}
capation,th{text-align:left;}
abbr,acronym{border:0;}
select,input,img{vertical-align:middle; }
a {text-decoration: none; font-weight:normal; cursor:pointer;}
b{ font-weight:bold; display:inline;}
input{height:auto; outline:none; vertical-align:bottom;+vertical-align:middle !important; _vertical-align:middle; line-height:normal}
textarea {resize: none;} /*6月14日更新，针对webkit核心的浏览器——Chrome(google浏览器),Safari(苹果浏览器)中textare可调整大小的问题定义. 取消拖动调整大小*/
textarea:focus {outline: none;} /*6月14日更新. textarea的聚焦时现在默认边框颜色不变*/
i, em, cite { font-style: normal; }

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*定位*/
.clear,.clearit{clear: both;margin: 0;padding: 0;}
.clearFix {display: block;}
.clearFix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.alc{text-align:center;}
.all{text-align:left;}
.alr{text-align:right;}
.vm{vertical-align:middle;}
.zoom{zoom:1}
.ct,.center{ margin:0px auto;}

.media .bd { vertical-align: baseline; display: table-cell; width: 10000px; *width: auto; *zoom: 1; }
.media .bd > :first-child { margin-top: 0; }
.media .bd > :last-child { margin-bottom: 0; }
.media .img { float: left; }
.media .img img { display: block; }
.media .bd img { display: block; }
.media .imgext { float: right; /*margin-left: 10px; */ }
.media .imgext img { display: block; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: "\20"; display: table; }
.clearfix:after { clear: both; }
.fn-left, .fn-right { display: inline; }
.fn-left { float: left; }
.fn-right { float: right; }


/* 页面部分 */
*{font-family:"Microsoft YaHei","微软雅黑","宋体";}
body{ background:#ccc; color:#000; overflow:hidden;}
a{ color:#fff;}
video{ background:#000;}

.wrap{ width:100%; height:100%; overflow:hidden; position:relative; z-index:1;}

#hand{ position:fixed; left:50%; bottom:16%; margin-left:-3.125%; width:6.25%; z-index:3; pointer-events:none;}
#hand img{ width:100%;}

#link{width:90%; padding:0px 5%; height:24px; border-top:1px solid #c2c2c2; background:#ededed; position: fixed; left:0px; bottom:50px; z-index:99;}
#link li{ line-height:24px; font-size:1em;}
#link li a{ color:#89725a; text-decoration:underline;}

#testbar{ width:100%; border-top:1px solid #c2c2c2; position: fixed; left:0px; bottom:50px; z-index:99; display:none;}
#testbar img{ width:100%;}


#loadBox{ position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50)\9; z-index:20;}
#loadBox p{ width:40px; height:40px; background:url(../images/common/loading.gif) no-repeat; background-size:contain; line-height:40px; font-size:10px; text-align:center; color:#fff; text-shadow:1px 1px 1px #333; position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-20px;}


.main{ position:absolute; left:0; top:0px; width:100%; z-index:1;}
.main .pages{ position:relative; width:100%; overflow:hidden;}



/* 产品亮点 css*/
.prdu a.btnView{ position:absolute; left:50%; bottom:11%; margin-left:-14%; width:28%;}
.prdu a.btnView img{ width:100%;}
.prdu img.slog{ position:absolute; left:50%; top:15%;}
.prdu img.slog1{ width:68%; margin-left:-34%; top:11%;}
.prdu img.slog2{ width:84%; margin-left:-42%;}
.prdu img.slog3{ width:84%; margin-left:-42%;}
.prdu img.slog4{ width:84%; margin-left:-42%;}
.prdu img.slog5{ width:84%; margin-left:-42%;}
.prdu img.slog6{ width:84%; margin-left:-42%;}

.focusPoint{ width:100%; height:100%; position: fixed; left:0; top:0; background:#191919; z-index:999; display:none;}
.focusPoint .boxBtnL{position:absolute; left:15px; top:32%; width:10%; height:15%; background: url(../images/common/ar1.png) left center no-repeat; background-size:contain; display:none;}
.focusPoint .boxBtnL.active{cursor:pointer; display:block;}
.focusPoint .boxBtnR{position:absolute; right:15px; top:32%; width:10%; height:15%; background: url(../images/common/ar2.png) right center no-repeat; background-size:contain; display:none;}
.focusPoint .boxBtnR.active{cursor:pointer; display:block;}
.focusPoint .boxMask{position:absolute; left:0px; top:0px; overflow:hidden;}
.focusPoint .boxMask ul{ position:absolute;}
.focusPoint .boxMask ul li{float:left; display:inline-block; overflow-x:hidden; overflow-y:auto;}
.focusPoint .boxMask ul li img{ width:100%;}
.focusPoint .boxMask ul li img:first-child{ margin-top:10%; margin-bottom:5px;}
.focusPoint a.close{position:absolute; right:0px; top:0px; width:10%; height:10%; background: url(../images/common2/close.png) right top no-repeat; background-size:contain;}



/* 弹窗 css*/
.popBox{position:fixed; left:0px; top:0px; z-index:999;}
.popBox .popMask {display:block;  background:#000\9; filter:alpha(opacity=50)\9; background:rgba(0,0,0,0.5);}

.popPoint{ width:100%; height:100%; background:#000; position:absolute; display:none;}
.popPoint .close{ position:absolute; right:20px; top:20px; width:45px; height:49px; background: url(../images/common2/close.png) center center no-repeat; background-size:contain; overflow:hidden; cursor:pointer;}

.popPic{ width:790px; height:560px; background:#fff; position:absolute; box-shadow:0px 0px 10px #333; display:none;}
.popPic p{}
.popPic p img{ width:790px; height:560px;}
.popPic .close{ position:absolute; right:0px; top:0px; width:32px; height:32px; background: url(../images/common2/close.png) center center no-repeat; background-size:contain; overflow:hidden; cursor:pointer;}

.popLoad{ width:100%; height:100%; left:0; top:0; opacity:0.5; background:#000; position:fixed; z-index:9999; display:none;}
.popLoad p{position:absolute; left:50%; top:50%; margin-left:-15px; margin-top:-15px; width:30px; height:30px; background:url(../images/iphone/loading.gif) center center no-repeat; background-size:contain; line-height:30px; text-align:center; color:#000;  font-size:0.5em; }


.popVideo{ width:100%; height:100%; background:#000; position:fixed; left:0; top:0; display:none; z-index:999;}
.popVideo .close{ position:absolute; right:20px; top:20px; width:70px; height:70px; background: url(../images/common2/close.png) center center no-repeat; overflow:hidden; cursor:pointer;}
#videoBox{ width:100%; height:100%;}

.popIpad{width:100%; height:100%; background:#000; position:fixed; left:0; top:0; display:none; z-index:999;}
.popIpad .video{ width:100%; height:84%; margin:8% auto;}
.popIpad .video video{ width:100%; height:100%;}
.popIpad .close{position:absolute; right:20px; top:20px; width:30px; height:30px; background: url(../images/common/close.png) center center no-repeat; background-size:contain; display:block; z-index:99;}

#turnBox{ width:100%; height:100%; background:#131313; position:fixed; left:0; top:0; z-index:99999; display:none; opacity:0.8;}
#turnBox span{ position:absolute; display:block; left:50%; top:50%; margin-left:-100px; margin-top:-69px; width:200px; height:138px;}

.page0 { z-index:5; width:100%;background-color: #318fc1;}
.page1 { background:url(../images/pg4_bg.jpg) center bottom #318fc1 no-repeat; background-size:100% auto; z-index:6; width:100%;}
.page2 { background:url(../images/pg3_bg.jpg) center bottom #8ac34c no-repeat; background-size:100% auto; z-index:7; width:100%;}
.page3 { background:url(../images/pg1_bg.jpg) center bottom #d83732 no-repeat; background-size:100% auto; z-index:9; width:100%;}
.page4 { background:url(../images/pg5_bg.jpg) center bottom #2d2d2d no-repeat; background-size:100% auto; z-index:10; width:100%;}
.page5 { background-color: #000; z-index:11; width:100%;}

img { width:100%;}


.share_ar{display: none;position: absolute;left: 0px;top:0px;z-index: 133;}
.form_ar{background:url(../images/bg.png) repeat; z-index:140; width:100%;position: absolute;left: 0px;top: 0px;display: none;}
.view_ac{background:url(../images/updata_bg.jpg) center top no-repeat; background-size:100% auto; z-index:128; width:100%;position: absolute;left: 0px;top: 0px;display: none;}
.winner_ar{display: none;position: absolute;left: 0px;top:0px;z-index: 133;}
.winner_ar_main{display: none;position: absolute;left: 0px;top:0px;z-index: 133;background-color: #e3c534;}
.winner_close{width: 17.5%;position: absolute;right: 0px;top: 0px;z-index: 30;}
.winner_title{width: 100%;margin: 5px auto 0;}
.win_text_area{margin: 0 auto;height: 60%;overflow-y: scroll;}

.rule_ar_main{display: none;position: absolute;left: 0px;top:0px;z-index: 133;background-color: #e3c534;}
.rule_close{width: 17.5%;position: absolute;right: 0px;top: 0px;z-index: 30;}
.rule_title{width: 100%;margin: 5px auto 0;}
.rule_text_area{margin: 3% auto 0;height: 60%;overflow-y: scroll;}

.form_close{width: 100%;position: absolute;top:19%;z-index: 148;}
.form_title_add_areat{width: 100%;position: absolute;top: 26.88%;left: 0px;z-index: 141;}
.form_title{width: 100%;}
.form_areat{width: 100%;position: relative;}
.bgimg{position: absolute;left: 0px;top: 0px;z-index: -1;}
.form_t{width: 70%;margin: 0 auto;padding-top: 15px;}
.form_t label{font-size: 2.5em;color: #000;}
.form_t input{background: #000;font-size: 2.5em;padding: 0 5px 7px;color: #fff;}
.form_hj{margin-bottom: 2.5%;}
.form_hj span{font-size: 2.5em;color: #000;}

.testdrive_yn{margin: 3% 0;}
.yes,.no{background: url(../images/fm_img5.jpg) 0 0 no-repeat;background-size: 45% 80%;  padding-left: 10%;color: #000; margin-right: 5%;}
.active.yes,.active.no{background: url(../images/fm_img4.jpg) 0 0 no-repeat;background-size: 45% 80%;}
.fm_left{float: left;font-size: 2em;}

.header_t{position: fixed;left: 0px;top: 0px;z-index: 155;}
.footer_t{position: fixed;left: 0px;bottom: 0px;z-index: 155;}
.menu_icon{position: fixed;left: 5%;top: 8%;z-index: 131;width: 13%;}



.muice_ic{position: fixed;left:5%;;z-index: 131;width: 13%;top: 20%;}


.down_ic{width: 100%;left: 0px;bottom:10%;position: fixed;z-index: 103;}/* 向下标示 */
.down_ic .ya_img{width: 9%;margin: 0 auto;position: relative;}
.down_ic .ya_img img{position: absolute;left:0px;
animation:yada 2s infinite;
-moz-animation:yada 2s infinite; /* Firefox */
-webkit-animation:yada 2s infinite; /* Safari and Chrome */
}
.down_ic .ya_text{width: 9%;margin: 0 auto;}
@keyframes yada
{
0%   {top: -55px;}
50% {top: -35px;}
100%   {top: -55px;}
}
@-moz-keyframes yada /* Firefox */
{
0%   {top: -55px;}
50% {top: -35px;}
100%   {top: -55px;}
}

@-webkit-keyframes yada /* Safari and Chrome */
{
0%   {top: -55px;}
50% {top: -35px;}
100%   {top: -55px;}
}



.video_main_area{width: 100%;margin:0 auto 30px;position: relative;}
.setvideo_img_area{width: 100%;height: 12.4%;}
.setvideo_img_area .setvideo_img{width: 71.875%;height: 100%;margin: 0 auto;}
.setvideo_img_area .setvideo_img .setvide_img_left{float: left;width:25%;height: 100%;}
.setvide_img_left img{width: 100%;height: 100%;display: block;}





/* 人物动画区域 */
.anime_area_popman{margin-top: 16%;width:100%;position: relative;z-index: 9;height: 88%;}
.popman_img1 {
    width: 100%;
    position: absolute;
    right: -100%;
    top: 0px;

}
.active .popman_img1 {
    right: 0px;
    animation:img1 1s;
    -moz-animation:img1 1s;
    -webkit-animation:img1 1s;
}
@keyframes img1
{
    0%   {right:-100%;}
    50% {right:-100%;}
    100%   {right:0px;}
}
@-moz-keyframes img1 /* Firefox */
{
    0%   {right:-100%;}
    50% {right:-100%;}
    100%   {right:0px;}
}

@-webkit-keyframes img1 /* Safari and Chrome */
{
    0%   {right:-100%;}
    50% {right:-100%;}
    100%   {right:0px;}
}
.popman_hito{
    width: 35%;
    position: absolute;
    left: -36%;
    top: 0px;
}
.active .popman_hito {
    left: 0px;
    animation:hito 2s;
    -moz-animation:hito 2s;
    -webkit-animation:hito 2s;
}
@keyframes hito
{
    0%   {left:-36%;}
    50% {left:-36%;}
    100%   {left:0px;}
}
@-moz-keyframes hito /* Firefox */
{
    0%   {left:-36%;}
    50% {left:-36%;}
    100%   {left:0px;}
}

@-webkit-keyframes hito /* Safari and Chrome */
{
    0%   {left:-36%;}
    50% {left:-36%;}
    100%   {left:0px;}
}
.popman_car{
    width: 100%;
    position: absolute;
    right: -100%;
    top: 0px;
}
.active .popman_car {
    right: 0px;
    animation:car 1.5s;
    -moz-animation:car 1.5s;
    -webkit-animation:car 1.5s;
}
@keyframes car
{
    0%   {right:-100%;}
    30% {right:-100%;}
    100%   {right:0px;}
}
@-moz-keyframes car /* Firefox */
{
    0%   {right:-100%;}
    30% {right:-100%;}
    100%   {right:0px;}
}

@-webkit-keyframes car /* Safari and Chrome */
{
    0%   {right:-100%;}
    30% {right:-100%;}
    100%   {right:0px;}
}
.popman_title{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
}
.active .popman_title {
    opacity: 1;
    animation:titvidzantext 2.5s;
    -moz-animation:titvidzantext 2.5s;
    -webkit-animation:titvidzantext 2.5s;
}
.popman_video_icon{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
}
.active .popman_video_icon {
    opacity: 1;
    animation:titvidzantext 3s;
    -moz-animation:titvidzantext 3s;
    -webkit-animation:titvidzantext 3s;
}
@keyframes titvidzantext
{
    0%   {opacity: 0;}
    50% {opacity: 0;}
    100%   {opacity: 1;}
}
@-moz-keyframes titvidzantext /* Firefox */
{
    0%   {opacity: 0;}
    50% {opacity: 0;}
    100%   {opacity: 1;}
}

@-webkit-keyframes titvidzantext /* Safari and Chrome */
{
    0%   {opacity: 0;}
    50% {opacity: 0;}
    100%   {opacity: 1;}
}
.popman_zan{
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    opacity: 0;
    text-align: center;
    z-index: 131;
}
.popman_zan img{
    width: 100%;
}
.zan_right{
    width: 23.75%;
    position: absolute;
    right: -24%;
    bottom: 22%;
    z-index: 132;
}
.zan_right img{
    width: 100%;
}
.zan_text{
    position: absolute;
    width: 100%;
    color: #fff;
    left: 0px;
    top: 53%;
    font-weight: bold;
    font-size: 1.6em;
}
.zan_text span{
    color: #fff;
    font-size: 1.8em;
    font-weight: bold;
}
.active .popman_zan {
    opacity: 1;
    bottom: 22%;
    animation:zan 3s;
    -moz-animation:zan 3s;
    -webkit-animation:zan 3s;
}
.active .zan_right {
    right: 0px;
    animation:zanright 3.5s;
    -moz-animation:zanright 3.5s;
    -webkit-animation:zanright 3.5s;
}
@keyframes zan
 {
     0%   {opacity: 0;bottom:0px;}
     70% {opacity: 0;bottom:0px;}
     100%   {opacity: 1;bottom:22%;}
 }
@-moz-keyframes zan /* Firefox */
{
    0%   {opacity: 0;bottom:0px;}
    70% {opacity: 0;bottom:0px;}
    100%   {opacity: 1;bottom:22%;}
}

@-webkit-keyframes zan /* Safari and Chrome */
{
    0%   {opacity: 0;bottom:0px;}
    70% {opacity: 0;bottom:0px;}
    100%   {opacity: 1;bottom:22%;}
}

@keyframes zanright
{
    0%   {right: -24%;}
    90% {right: -24%;}
    100%   {right: 0px;}
}
@-moz-keyframes zanright /* Firefox */
{
    0%   {right: -24%;}
    90% {right: -24%;}
    100%   {right: 0px;}
}

@-webkit-keyframes zanright /* Safari and Chrome */
{
    0%   {right: -24%;}
    90% {right: -24%;}
    100%   {right: 0px;}
}
.popman_ps{
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    opacity: 0;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
}
.active .popman_ps {
    opacity: 1;
    bottom: 16%;
    animation:textps 3.1s;
    -moz-animation:textps 3.1s;
    -webkit-animation:textps 3.1s;
}
@keyframes textps
{
    0%   {opacity: 0;bottom:0px;}
    70% {opacity: 0;bottom:0px;}
    100%   {opacity: 1;bottom:16%;}
}
@-moz-keyframes textps /* Firefox */
{
    0%   {opacity: 0;bottom:0px;}
    70% {opacity: 0;bottom:0px;}
    100%   {opacity: 1;bottom:16%;}
}

@-webkit-keyframes textps /* Safari and Chrome */
{
    0%   {opacity: 0;bottom:0px;}
    70% {opacity: 0;bottom:0px;}
    100%   {opacity: 1;bottom:16%;}
}


/*logo动画区域*/
.media_share_title{
    width: 100%;
    opacity: 0;
}
.media_share_text {
    width: 100%;
    opacity: 0;
}
.active .media_share_title{
    opacity: 1;
    animation:medsgtt 1s;
    -moz-animation:medsgtt 1s;
    -webkit-animation:medsgtt 1s;
}
.active .media_share_text{
    opacity: 1;
    animation:medsgtt 1.2s;
    -moz-animation:medsgtt 1.2s;
    -webkit-animation:medsgtt 1.2s;
}
.media_share_logo_show {
    width: 100%;
    height: 44%;
    position: relative;
}
.media_share_logo_show .media_share_logo_all{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    opacity: 0;
}
.active .media_share_logo_show .media_share_logo1{
    opacity: 1;
    animation:medsgtt 1.5s;
    -moz-animation:medsgtt 1.5s;
    -webkit-animation:medsgtt 1.5s;
}
.active .media_share_logo_show .media_share_logo2{
    opacity: 1;
    animation:medsgtt 1.7s;
    -moz-animation:medsgtt 1.7s;
    -webkit-animation:medsgtt 1.7s;
}
.active .media_share_logo_show .media_share_logo3{
    opacity: 1;
    animation:medsgtt 1.9s;
    -moz-animation:medsgtt 1.9s;
    -webkit-animation:medsgtt 1.9s;
}
.active .media_share_logo_show .media_share_logo4{
    opacity: 1;
    animation:medsgtt 2.1s;
    -moz-animation:medsgtt 2.1s;
    -webkit-animation:medsgtt 2.1s;
}
.active .media_share_logo_show .media_share_logo5{
    opacity: 1;
    animation:medsgtt 2.3s;
    -moz-animation:medsgtt 2.3s;
    -webkit-animation:medsgtt 2.3s;
}
.active .media_share_logo_show .media_share_logo6{
    opacity: 1;
    animation:medsgtt 2.5s;
    -moz-animation:medsgtt 2.5s;
    -webkit-animation:medsgtt 2.5s;
}
.active .media_share_logo_show .media_share_logo7{
    opacity: 1;
    animation:medsgtt 2.7s;
    -moz-animation:medsgtt 2.7s;
    -webkit-animation:medsgtt 2.7s;
}
.active .media_share_logo_show .media_share_logo8{
    opacity: 1;
    animation:medsgtt 2.9s;
    -moz-animation:medsgtt 2.9s;
    -webkit-animation:medsgtt 2.9s;
}
.active .media_share_logo_show .media_share_logo9{
    opacity: 1;
    animation:medsgtt 3.1s;
    -moz-animation:medsgtt 3.1s;
    -webkit-animation:medsgtt 3.1s;
}
/*.active .media_share_logo_show .media_share_logo10{*/
    /*opacity: 1;*/
    /*animation:medsgtt 3.3s;*/
    /*-moz-animation:medsgtt 3.3s;*/
    /*-webkit-animation:medsgtt 3.3s;*/
/*}*/
/*.active .media_share_logo_show .media_share_logo11{*/
    /*opacity: 1;*/
    /*animation:medsgtt 3.5s;*/
    /*-moz-animation:medsgtt 3.5s;*/
    /*-webkit-animation:medsgtt 3.5s;*/
/*}*/


.media_share_logo_link{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 30;
}
.media_share_logo_link_wh{
    width: 25%;
    height: 34%;
    display: block;
    position: absolute;
}
.media_share_logo_link_whw{
    width: 25%;
    height: 32%;
    display: block;
    position: absolute;
}
.media_share_logo_link_wh a,.media_share_logo_link_whw a{width: 100%;height: 100%;display: block;}
.media_share_logo_link1{
    left: 8%;
    top: 0px;
}
.media_share_logo_link2{
    left: 33%;
    top: 0px;
}
.media_share_logo_link3{
    left: 58%;
    top: 0px;
}
.media_share_logo_link4{
    left: 20%;
    top: 34%;
}
.media_share_logo_link5{
    left: 45%;
    top: 34%;
}
.media_share_logo_link6{
    left: 70%;
    top: 34%;
}
.media_share_logo_link7{
    left: 8%;
    top: 66%;
}
.media_share_logo_link8{
    left: 33%;
    top: 66%;
}
.media_share_logo_link9{
    left: 58%;
    top: 66%;
}
/*.media_share_logo_link10{*/
    /*left: 50%;*/
    /*top: 66%;*/
/*}*/
/*.media_share_logo_link11{*/
    /*left: 75%;*/
    /*top: 66%;*/
/*}*/





@keyframes medsgtt
{
    0%   {opacity: 0;}
    50% {opacity: 0;}
    100%   {opacity: 1;}
}
@-moz-keyframes medsgtt /* Firefox */
{
    0%   {opacity: 0;}
    50% {opacity: 0;}
    100%   {opacity: 1;}
}

@-webkit-keyframes medsgtt /* Safari and Chrome */
{
    0%   {opacity: 0;}
    50% {opacity: 0;}
    100%   {opacity: 1;}
}
.active .popman_img1 {
    right: 0px;
    animation:img1 1s;
    -moz-animation:img1 1s;
    -webkit-animation:img1 1s;
}
@keyframes img1
{
    0%   {right:-100%;}
    50% {right:-100%;}
    100%   {right:0px;}
}
@-moz-keyframes img1 /* Firefox */
{
    0%   {right:-100%;}
    50% {right:-100%;}
    100%   {right:0px;}
}

@-webkit-keyframes img1 /* Safari and Chrome */
{
    0%   {right:-100%;}
    50% {right:-100%;}
    100%   {right:0px;}
}





/*menu*/
.menu{width: 50%;position: fixed;top: 0px;left: -75%;background: url(../images/bg.png) repeat;z-index: 132;}
.backtop{background-color: #e9cc1e;margin-top: -3px!important;border-top: 0px!important;}
.menu ul{width: 100%;height: 100%;}
.menu ul li{width: 100%;border-top: 1px #2e3130 solid;border-bottom: 1px #2e3130 solid;display: block;}
.menu ul li.closebt{height: 12%;}
.active.menu{left: 0px;
animation:tanchu 0.5s;
-moz-animation:tanchu 0.5s; /* Firefox */
-webkit-animation:tanchu 0.5s; /* Safari and Chrome */
}
.activet.menu{left: left: -75%;
animation:shouhui 0.5s;
-moz-animation:shouhui 0.5s; /* Firefox */
-webkit-animation:shouhui 0.5s; /* Safari and Chrome */
}
.menu_close{text-align: right;background-color: #e9cc1e;margin-bottom:0px!important;border: 0px!important;height: 20%;position: relative;}
.menu_close img{width: 20%;right: -25%;bottom: -50%;position: absolute;}

canvas{margin-top: -20%;}







/*menu动画区域*/
@keyframes tanchu
{
0%   {left:-75%;}
100% {left:0px;}
}
@-moz-keyframes tanchu /* Firefox */
{
0%   {left:-75%;}
100% {left:0px;}
}

@-webkit-keyframes tanchu /* Safari and Chrome */
{
0%   {left:-75%;}
100% {left:0px;}
}

@keyframes shouhui
{
0%   {left:0px;}
100% {left:-75%;}
}
@-moz-keyframes shouhui /* Firefox */
{
0%   {left:0px;}
100% {left:-75%;}
}

@-webkit-keyframes shouhui /* Safari and Chrome */
{
0%   {left:0px;}
100% {left:-75%;}
}
/*media*/
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 641px) {

}
@media screen and (max-width: 481px) {

}
@media screen and (max-width: 415px) {
    .yes,.no{background: url(../images/fm_img5.jpg) 0 0 no-repeat;background-size: 35% 80%;  padding-left: 10%;color: #000; margin-right: 5%;}
    .active.yes,.active.no{background: url(../images/fm_img4.jpg) 0 0 no-repeat;background-size: 35% 80%;}

}
@media screen and (max-width: 376px) {

}
@media screen and (max-width: 361px) {

}
@media screen and (max-width: 321px) {

}
/* iphone4 */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){


.active .hati{top:72px;
animation:text_animeup 1.9s;
-moz-animation:text_animeup 1.9s; /* Firefox */
-webkit-animation:text_animeup 1.9s; /* Safari and Chrome */
}

@keyframes text_animeup
{
0%   {top:0px;}
100%   {top:72px;}
}
@-moz-keyframes text_animeup /* Firefox */
{
0%   {top:0px;}
100%   {top:72px;}
}

@-webkit-keyframes text_animeup /* Safari and Chrome */
{
0%   {top:0px;}
100%   {top:72px;}
}
}

/* iphone5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    .yes,.no{background: url(../images/fm_img5.jpg) 0 0 no-repeat;background-size: 30% 80%;  padding-left: 10%;color: #000; margin-right: 5%;}
    .active.yes,.active.no{background: url(../images/fm_img4.jpg) 0 0 no-repeat;background-size: 30% 80%;}
}
/* note */
@media screen and (device-width: 400px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2){

}



